<template lang="html">
  <div id="ArticleDetail">
    <mu-paper class="article-page" :zDepth="1">
      <mu-appbar title="文章内容">
        <mu-icon-button icon="menu" slot="left" to="/" />
        <mu-flat-button label="expand_more" slot="right"/>
        <mu-icon-button icon="expand_more" slot="right"/>
      </mu-appbar>
      <mu-card class="article-card">
        <mu-card-header title="Defore 的日记" subTitle="2017-11-21">
          <mu-avatar src="/static/images/1.jpg" slot="avatar"/>
        </mu-card-header>
        <mu-card-media title="第一章" subTitle="鸟人">
          <img src="/static/images/2.jpg" />
        </mu-card-media>
        <mu-card-title title="Content Title" subTitle="Content Title"/>
        <mu-card-text>
          {{$route.params.id}}
          散落在指尖的阳光，我试着轻轻抓住光影的踪迹，它却在眉宇间投下一片淡淡的阴影。
          调皮的阳光掀动了四月的心帘，温暖如约的歌声渐起。
          似乎在诉说着，我也可以在漆黑的角落里，找到阴影背后的阳光，
          找到阳光与阴影奏出和谐的旋律。我要用一颗敏感赤诚的心迎接每一缕滑过指尖的阳光！
        </mu-card-text>
        <mu-card-actions>
          <mu-flat-button label="Action 1" backgroundColor="#2196f3"/>
          <mu-flat-button label="Action 2"/>
        </mu-card-actions>
      </mu-card>
    </mu-paper>
  </div>
</template>

<script>
export default {
  created () {
    console.log("ArticleDetail")
  }
}
</script>

<style lang="scss" scoped>
.article-page {
  width: 100%;
}
.article-card {
  width: 1000px;
  margin: 0 auto;
}
</style>
